<template>
  <div class="bgff p20">
    <el-form :inline="true" :model="form" class="demo-form-inline mb20">
      <el-form-item label="用户名">
        <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <!--<el-form-item label="日志类型">
        <el-select v-model="form.logType" placeholder="请选择" style="width:100px;">
          <el-option
            v-for="item in [{id:'',name:'所有'},{id:'INFO',name:'正常'},{id:'ERROR',name:'异常'}]"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-button class="mb20" size="medium" type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top:20px;" border>
      <el-table-column
        type="index"
        width="50"
        :index="(index)=>{return (index+1) + (curPage - 1) * size }"
        label="序号"
      ></el-table-column>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="requestIp" label="IP" />
      <el-table-column prop="description" label="描述" />
      <el-table-column :show-overflow-tooltip="true" prop="method" label="方法名称" />
      <el-table-column :show-overflow-tooltip="true" prop="params" label="参数" />
      <el-table-column prop="time" label="请求耗时" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
          <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
          <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="操作时间" width="180px">
        <template slot-scope="scope">
          <span>{{ new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="mt20"
      @current-change="handlePage"
      @size-change="handleSizeChange"
      :current-page.sync="curPage"
      :page-size="size"
      :page-sizes="[5,10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { _logsList } from "@/http/ajax";
export default {
  data() {
    return {
      form: { username:"", logType: ""},
      loading: false,
      tableData: [],
      curPage: 1,
      size: 10,
      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.getList();
    },
    // 获取数据列表
    getList() {
      this.loading = true;
      this.tableData = [];
      let data = {
        page: this.curPage - 1,
        size: this.size,
        sort: "id,desc",
        logType:  this.form.logType,
        username: this.form.username
      };
      _logsList(
        data,
        res => {
          this.total = res.totalElements;
          this.tableData = res.content;
          this.loading = false;
        },
        err => {
          this.loading = false;
        }
      );
    },
    // 切换页码
    handlePage(val) {
      this.curPage = val;
      this.getList();
    },
    // 切换条数
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
